<template>
  <div
    class="template-base-box"
    :class="route.meta.templateByid == 529130430058565 && 'template-base-scroll'"
    id="wap-template-parent"
  >
    <router-view />
    <lottieMove v-if="loading"></lottieMove>
  </div>
</template>

<script setup lang="ts">
//@ts-nocheck
import { urls } from '@/utils/request/upload';
import { removeLottie } from '@/utils/minxin';
import { getUrlTemplateId } from '@/utils/minxin';
import lottieMove from '@/components/lottieMove.vue';
import { watch, reactive, ref, nextTick } from 'vue';
import { pathSquare } from '@/utils/minxin';
import { getMobileType } from '@/utils/getMoble';
import { setAuthorization, getHeardToken, getHeardXtoken, setMd5Info, removeAuthorization } from '@/api/utils';
import { shearInit } from '@/hooks/WXshare';
import { useRouter, useRoute } from 'vue-router';
import { useProjectStore } from '@/store';
import { configData } from '@/api/templates/templates';
import { projectDetail } from '@/api/project/project';
import { setBrowse } from '@/api/borwse/borwse';

const loading = ref(true);
const store = useProjectStore();
const route = useRoute();
const router = useRouter();
const state = reactive({
  includeList: [],
});
const addBrowse = () => {
  setBrowse({
    refType: 3,
    refId: localStorage.getItem('projectId'),
  });
};
getUrlTemplateId();
const pathTemplate = () => {
  configData(localStorage.getItem('projectId')).then((res) => {
    if (res.statusCode == 200) {
      store.setstyleInfo(res.data);
    }
  });
};
const initName = async () => {
  try {
    let res = await projectDetail(localStorage.getItem('projectId'));
    // window.document.title = res.data.name;
    window.document.title = res.data.name + (res.data.subTitle ? '——' + res.data.subTitle : '');
    shearInit(
      res.data.name + (res.data.subTitle ? '——' + res.data.subTitle : ''),
      res.data.coverUrl ? urls + res.data.coverUrl : '',
      res.data.description,
    );
    store.setDigitalShowroom(res.data.digitalShowroom);
    store.publishType = res.data.PublishStatus;
    store.isActivitys = res.data.activityId ? true : false;
  } catch {}
};
const pathTemplateInit = () => {
  try {
    configData(localStorage.getItem('projectId')).then((res) => {
      loading.value = false;
      store.setstyleInfo(res.data);
      if (res.statusCode == 200) {
        loading.value = false;

        let arr = pathSquare(res.data.id, false);
        console.log(arr);

        // console.log(arr);
        if (route.meta.templateByid !== res.data.id) {
          // console.log(route.meta.templateByid, res.data.id, '是否等于');
          if (route.meta.modelTemplateId !== res.data.id) {
            router.push({
              path: arr,
            });
          }
        }
        getMobileType(res.data.id);
      }
      removeLottie();
      loading.value = false;
    });
  } catch {
    removeLottie();
  }
};
pathTemplateInit();

initName();
addBrowse();

const handleFn = () => {
  getUrlTemplateId();
  pathTemplate();
  initName();
};
document.addEventListener('visibilitychange', (e) => {
  if (document.visibilityState === 'hidden') {
    handleFn();
  }
});
window.addEventListener('beforeunload', function (event) {
  // 处理事件逻辑
  handleFn();
});

// watch(
//   () => route,
//   () => {
//     nextTick(() => {
//       if (route.meta.loopType) {
//         getMobileType(route.meta.loopType);
//       }
//     });
//   },
//   { deep: true },
// );
/*浏览器关闭、浏览器标签页关闭、浏览器刷新均会触发"beforeunload"事件*/
// window.addEventListener('focus', (e) => handleFn());
// http://localhost:8880/#/exhibition?mode=2&projectId=433871743299653
</script>

<style scoped lang="less">
.template-base-box {
  width: 100%;
  height: 100vh;
  overflow-x: hidden;
  scrollbar-width: none;
  background-image: url('https://static.jiyi.show/customized/zjz/homebanner1.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.template-base-scroll {
  height: auto !important;
  overflow-x: visible;
  min-height: 100vh;
}
#LoadingLoop {
  top: 50%;
  left: 50%;
  position: fixed;
  -webkit-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
  z-index: 100;
}
#LoadingLoop p {
  color: #d2ad77;
}
@-webkit-keyframes ball-beat {
  50% {
    opacity: 0.2;
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes ball-beat {
  50% {
    opacity: 0.2;
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.ball-beat > div {
  background-color: #d2ad77;
  width: 10px;
  height: 10px;
  border-radius: 100% !important;
  margin: 2px;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  display: inline-block;
  -webkit-animation: ball-beat 0.7s 0s infinite linear;
  animation: ball-beat 0.7s 0s infinite linear;
}

.ball-beat > div:nth-child(2n-1) {
  -webkit-animation-delay: 0.35s !important;
  animation-delay: 0.35s !important;
}
</style>
